<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VBatchInput v-model="form.sku" placeholder="SKU" style="width: 200px" @search="query" />
        <VSelect v-model="form.country" placeholder="国家" :options="options.country || []" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VGroup>
          <el-select v-model="form.input.type" style="width: 140px" @change="form.input.value = []">
            <el-option label="海外仓主仓库" value="warehouse_id"></el-option>
            <el-option label="海外仓主仓平台" value="warehouse_platform_id"></el-option>
          </el-select>
          <VSelect
            v-model="form.input.value"
            placeholder="请选择"
            :options="form.input.type === 'warehouse_platform_id' ? options.warehouse_platform_id : options.warehouse_id"
            multiple
            collapse-tags
            filterable
            clearable
            style="min-width: 160px"
          />
        </VGroup>
        <VSelect v-model="form.status" placeholder="使用状态" :options="options.status" multiple collapse-tags filterable clearable style="min-width: 120px" />
        <VCascader v-model="form.update_user_id" placeholder="更新人" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VGroup>
          <div class="v-group-item">更新日期</div>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton auth="/purchase/demand/basic/country/add" type="primary" @click="create(tableRef)"><i class="dk-iconfont icon-Plus" />添加</VButton>
        <VButton auth="/purchase/demand/basic/country/enable_forbidden" :loading="loadings.start" @click="handleBatch('start')">
          <VStatus :value="true" />
        </VButton>
        <VButton auth="/purchase/demand/basic/country/enable_forbidden" :loading="loadings.stop" @click="handleBatch('stop')">
          <VStatus :value="false" />
        </VButton>
        <VButton auth="/purchase/demand/basic/country/updateWarehouse" :loading="loadings.updateWarehouse" @click="handleBatch('updateWarehouse')"> 批量修改主仓 </VButton>
        <VImport
          auth="/purchase/demand/basic/country/import"
          :tableRef="tableRef"
          importUrl="/v1/purchase-config/country-warehouse/import"
          downloadUrl="https://xc-pms.oss-cn-shenzhen.aliyuncs.com/template/国家主仓导入模板.xlsx"
          class="ml-auto"
          @success="query"
        />
        <VExport auth="/purchase/demand/basic/country/derive" mainKey="cw_id" name="country_warehouse" task :tableRef="tableRef" />
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <UpdateWarehouse ref="updateWarehouseRef" :options="options" @success="query" />
    <VLog ref="logRef" />
  </VPage>
</template>

<script setup lang="jsx" name="Account">
import api from "./api"
import Add from "./components/Add"
import UpdateWarehouse from "./components/UpdateWarehouse"
import VImport from "@/components/VImport"
import { getOptionPms } from "@/api/public"
import { ElMessage, ElMessageBox } from "element-plus"

const baseName = "country_warehouse"
const tableRef = ref()
const logRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 获取options
const options = ref({})
getOptionPms({ type: baseName }).then((res) => {
  options.value = res.data
})

// 新增
const addRef = ref()
const create = () => {
  addRef?.value.open()
}

// 批量操作
const updateWarehouseRef = ref()
const handleBatch = (name) => {
  const selection = tableRef.value.$table.getCheckboxRecords()
  if (!selection.length) {
    ElMessage.warning("请先选择行")
    return
  }
  const cw_ids = selection.map((d) => d.cw_id)
  const showLoading = () => (loadings[name] = true)
  const closeLoading = () => (loadings[name] = false)
  const handle = {
    start: () => {
      showLoading()
      api
        .change({ cw_ids, status: 1 })
        .then((res) => {
          query()
          ElMessage({ type: "success", message: "操作成功!" })
        })
        .finally(closeLoading)
    },
    stop: () => {
      showLoading()
      api
        .change({ cw_ids, status: 2 })
        .then((res) => {
          query()
          ElMessage({ type: "success", message: "操作成功!" })
        })
        .finally(closeLoading)
    },
    updateWarehouse: () => {
      updateWarehouseRef.value.open(cw_ids)
    },
  }
  handle[name]()
}
// 单行操作
const handleRow = (name, row, rowIndex) => {
  const { cw_id, status } = row
  const showLoading = () => {
    loadings[name + rowIndex] = true
  }
  const closeLoading = () => {
    loadings[name + rowIndex] = false
  }
  const handle = {
    edit: () => {
      addRef?.value.open(cw_id)
    },
    change: () => {
      showLoading()
      api
        .change({ cw_ids: [cw_id], status: status === 1 ? 2 : 1 })
        .then((res) => {
          query()
          ElMessage({ type: "success", message: "操作成功!" })
        })
        .finally(closeLoading)
    },
    log: () => {
      logRef?.value.open({ log_type: baseName, cw_id })
    },
  }
  handle[name]()
}

// 列表配置
const tableOptions = reactive({
  rowConfig: { height: 50 },
  showOverflow: false,
  formConfig: {
    data: {
      input: { type: "warehouse_id", value: [] },
      dateRange: { type: "update_time", value: [], range: true },
    },
  },
  columns: [
    { type: "checkbox", fixed: "left", width: 40 },
    { field: "sku", title: "SKU", minWidth: 80 },
    {
      field: "country_name",
      title: "国家",
      minWidth: 80,
      slots: {
        default: ({ row }) => <VText value={row.country_name}></VText>,
      },
    },
    {
      field: "warehouse_name",
      title: "海外仓主仓库",
      minWidth: 200,
      slots: {
        default: ({ row }) => <VText value={row.warehouse_name}></VText>,
      },
    },
    { field: "status_name", title: "使用状态", minWidth: 70, slots: { default: ({ row }) => <VStatus value={row.status === 1} /> } },
    {
      field: "update_user",
      title: "更新人",
      minWidth: 100,
      slots: {
        default: ({ row }) => <VText value={row.update_user}></VText>,
      },
    },
    {
      field: "update_time",
      title: "更新日期",
      minWidth: 150,
      slots: {
        default: ({ row }) => <VText value={row.update_time}></VText>,
      },
    },
    {
      title: "操作",
      width: 170,
      fixed: "right",
      slots: {
        default: ({ row, rowIndex }) => {
          const { cw_id, status } = row
          return [
            <div>
              <VButton auth="/purchase/demand/basic/country/edit" link type="primary" onClick={() => handleRow("edit", row)}>
                编辑
              </VButton>
              <VButton auth="/purchase/demand/basic/country/enable_forbidden" link type="primary" loading={loadings["change" + rowIndex]} onClick={() => handleRow("change", row, rowIndex)}>
                {status === 1 ? "禁用" : "启用"}
              </VButton>
              <VButton auth="/purchase/demand/basic/country/logs" link type="primary" onClick={() => handleRow("log", row)}>
                日志
              </VButton>
            </div>,
          ]
        },
      },
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page }),
    },
  },
})
</script>
